<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            font-family: 'Courier New', 'monospace', 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Tahoma', 'Arial', 'sans-serif';
        }




        @keyframes torote {

            from {
                transform: rotate(0deg);

            }

            to {
                transform: rotate(360deg);
            }
        }


        body {
            max-width: 750px;
            min-width: 320px;
            background: #469a8d;
            margin: 0 auto;
        }

        #content {
            width: 100%;
            background: url('https://img.alicdn.com/imgextra/i2/1708564976/O1CN01LRXPDt1md3bwMNNQT_!!1708564976.jpg');
            margin: 0 auto;
            background-size: 100%;
            position: relative;
        }

        #mask {
            width: 100%;
            background: url('https://img.alicdn.com/imgextra/i2/1708564976/O1CN019fezBa1md3bqIWL2x_!!1708564976.png');
            margin: 0 auto;
            background-size: 100%;
            position: fixed;
            display: none;
        }

        #ra {
            width: 100%;
            height: 124.8vw;
        }

        #rote {
            width: 12vw;
            height: 12vw;
            margin: 0 auto;
            animation: torote 1s linear infinite;

        }

        #rote img {
            width: 100%;
            display: block;
        }

        .one {
            width: 100vw;
            height: 46vw;
            margin: 0 auto;

        }

        .two {
            width: 70vw;
            height: 12vw;
            margin: 0 auto;
        }

        .two marquee {
            height: 12vw;

            font-size: 3.7vw;
            color: #be302e;
            line-height: 12vw;
        }

        .three {
            width: 100%;
            height: 28vw;
        }

        .four {
            width: 100%;
            height: 7.2vw;
        }

        .four div {
            float: left;
        }

        .a {
            margin-left: 21.3vw;
            width: 28.8vw;
            height: 7.2vw;
            color: #469a8d;
            font-size: 5.3vw;
        }

        .b {
            width: 32vw;
            height: 7.2vw;
            color: #469a8d;
            font-size: 5.3vw;
        }

        .five {
            width: 100%;
            height: 79.8vw;
        }

        .six {
            width: 100%;
            height: 16vw;
        }

        .timec {
            margin-left: 54vw;
            width: 40vw;
            height: 16vw;
            font-size: 3.7vw;
            color: #558b7d;
        }

        .seven {
            width: 100%;
            height: 133.2vw;
        }

        .eight {
            width: 100%;
            height: 138vw;
        }

        .btn {
            width: 29vw;
            height: 29vw;
            margin-left: 65vw;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div id="content">
        <div id="mask">
            <div id="ra"></div>
            <div id="rote">
                <img src="https://img.alicdn.com/imgextra/i3/1708564976/O1CN016fFYSK1md3bnv7BzB_!!1708564976.png"
                    alt="">
            </div>
            <div style="height:80vw"></div>
        </div>
        <div class="one"></div>
        <div class="two">
            <marquee behavior="" direction="">
                请年满3周岁及以上居民，尽快就近完成新冠疫苗全程免疫接种，请年满18周岁及以上居民，尽快就近接种加强针。
            </marquee>
        </div>
        <div class="three"></div>
        <div class="four">
            <div class="a">
                19:12:00
            </div>
            <div class="b">
                2022-12-16
            </div>
        </div>
        <div class="five">

        </div>
        <div class="six">
            <div class="timec">
                2022-10-16 01:06
            </div>
        </div>
        <div class="seven"></div>
        <div class="eight">
            <div class="btn"></div>
        </div>

    </div>
</body>
<script>
    const a = document.querySelector(".a");
    const b = document.querySelector(".b");
    const c = document.querySelector(".timec");
    const btn = document.querySelector(".btn");
    const mask = document.querySelector("#mask");
    var date = new Date();
    var year = date.getFullYear();    //  返回的是年份
    var mouth = date.getMonth() + 1;  //  返回的月份上个月的月份，记得+1才是当月
    var dates = date.getDate();       //  返回的是几号
    var h = date.getHours();

    var m = date.getMinutes();

    var s = date.getSeconds();


    function abc(k) {
        if (k < 10) {
            return "0" + k;
        } else {
            return k;
        }
    }
    setInterval(function () {
        var date = new Date();
        var year = date.getFullYear();    //  返回的是年份
        var mouth = date.getMonth() + 1;  //  返回的月份上个月的月份，记得+1才是当月
        var dates = date.getDate();       //  返回的是几号
        var h = date.getHours();

        var m = date.getMinutes();

        var s = date.getSeconds();



        a.innerHTML = abc(h) + ":" + abc(m) + ":" + abc(s);
    }, 1000)
    b.innerHTML = year + "-" + mouth + "-" + dates;
    c.innerHTML = year + "-" + mouth + "-" + (dates - 1) + "&nbsp 01:08";

    btn.addEventListener('click', function () {
        mask.style.display = "block";
        setTimeout(function () {
            window.location = "./02.html";
        }, 2000)
    })
</script>

</html>